<template>
    <view>
        <view class="uni-add-tips-box" v-if="showTip">
            <view class="uni-add-tips-content" @tap="hideTip">
                <text>{{ tips }}</text>
            </view>
        </view>
        <view class="uni-add-tips-imgbox" v-if="showImgs">
            <view style="flex-direction: column;align-items: flex-start;">
                <text>1. 点击(·•·)</text>
                <image
                    :lazy-load="true"
                    :src="tipImg && tipImg.img1"
                    style="width: 100%;height: 74px;"
                ></image>
            </view>
            <view style="flex-direction: column;align-items: flex-start;">
                <text>2. 点击「添加到我的小程序」</text>
                <image
                    :lazy-load="true"
                    :src="tipImg && tipImg.img2"
                    style="width: 100%;height: 138px;"
                ></image>
            </view>
            <view style="flex-direction: column;align-items: flex-start;">
                <text>3. 以后在「我的小程序」里就能找到了</text>
                <image
                    :lazy-load="true"
                    :src="tipImg && tipImg.img3"
                    style="width: 100%;height: 154px;"
                ></image>
            </view>
            <view class="ok-btn" hover-class="btn-hover" @click="hideImgs">
                <view><text>我知道了！</text></view>
            </view>
        </view>
    </view>
</template>

<script>
const SHOW_TIP = 'SHOW_TIP';
export default {
    props: {
        tip: {
            type: [String, Object],
            default: '点击「·•·」，下次访问更便捷',
            required: false
        },
        duration: {
            type: Number,
            default: 20,
            required: false
        }
    },
    data() {
        return {
            showTip: false,
            showImgs: false,
            tipImg: this.$config.tipImg || null,
            tips: ''
        };
    },
    mounted() {
        this.showTip = !uni.getStorageInfoSync().keys.includes(SHOW_TIP);
        this.tips = this.$config.tipImg.tip ? this.$config.tipImg.tip : this.tip;
        // setTimeout(() => {
        //     this.showTip = false;
        // }, this.duration * 1000);
    },
    methods: {
        hideTip() {
            this.showImgs = true;
            this.showTip = false;
        },
        hideImgs() {
            uni.setStorageSync(SHOW_TIP, true);
            this.showTip = false;
            this.showImgs = false;
        }
    }
};
</script>

<style lang="scss" scoped>
$themeColor: #FA8AA7; //主题色
.uni-add-tips-box {
    position: fixed;
    top: 10;
    right: 0;
    z-index: 202105280704;
    opacity: 0.8;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    width: 600upx;
    animation: opacityC 1s linear infinite;
}
.uni-add-tips-content::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: -38upx;
    right: 105upx;
    border-width: 20upx;
    border-style: solid;
    display: block;
    border-color: transparent transparent $themeColor transparent;
}
.uni-add-tips-content {
    border-width: 0upx;
    margin-top: 20upx;
    position: relative;
    background-color: $themeColor;
    box-shadow: 0 10upx 20upx -10upx $themeColor;
    border-radius: 12upx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18upx 20upx;
    margin-right: 40upx;
}
.uni-add-tips-content > text {
    color: #fff;
    font-size: 28upx;
    font-weight: 400;
}
@keyframes opacityC {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}
.uni-add-tips-imgbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 202105280705;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 100rpx 40rpx 0 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.uni-add-tips-imgbox > view {
    margin: 10px 0;
    display: flex;
    /* align-items: center; */
    flex-direction: column;
}
.uni-add-tips-imgbox > view > text {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
    color: #333;
}
.uni-add-tips-imgbox > view > image {
    border-radius: 10px;
}

.ok-btn {
    width: 100%;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ok-btn > view {
    height: 40px;
    width: 120px;
    background-color: #3282ff;
    box-shadow: 0 5px 10px -px #3282ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
}
.ok-btn > view > text {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
}
.btn-hover {
    opacity: 0.6;
}
</style>
